﻿<style>
    .kechengxiangqing{
    	margin-bottom:0;
    	border-bottom:0;
    }
    .kechengxiangqing tr>th{
    	border-bottom:0;
    }
</style>
<a class="btn btn-primary huoqu" href="#">获取该课程的学生列表</a>
<br>
<br>
<table class="table table-striped table-bordered table-hover kechengxiangqing">
    <tr>
        <th class="text-center">课程详情</th>
    </tr>
</table>
<table class="table table-striped table-bordered table-hover text-center table-test">
    <tr>
        <td>课程编号</td>
        <td>123456789</td>
    </tr>
    <tr>
        <td>课程名称</td>
        <td>计算机网络数据结构</td>
    </tr>
    <tr>
        <td>老师编号</td>
        <td>123456789</td>
    </tr>
    <tr>
        <td>课程老师</td>
        <td>王多余</td>
    </tr>
    <tr>
        <td>课程学分</td>
        <td>3</td>
    </tr>
    <tr>
        <td>总课时</td>
        <td>30</td>
    </tr>
    <tr>
        <td>课程状态</td>
        <td>已开课</td>
    </tr>
</table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal"> &times;</button>
                <h4 class="text-danger">出错啦！</h4>
            </div>
            <div class="modal-body">
                <h5>数据请求失败！</h5>
            </div>
            <div class="modal-footer">
                <a class="btn btn-primary" data-dismiss="modal">确认</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal"> &times;</button>
                <h4 class="text-danger">提示</h4>
            </div>
            <div class="modal-body">
                <h5>导出成功！</h5>
            </div>
            <div class="modal-footer">
                <a class="btn btn-primary" data-dismiss="modal">确认</a>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button class="close" data-dismiss="modal"> &times;</button>
                                <h4 class="text-danger text-center">学生列表</h4>
                            </div>
                            <div class="modal-body">
                                <h6>*选课情况1为通过、-1为不通过*</h6>
                                <table class="table table-striped table-bordered table-hover text-center table-content">
                                    <tr>
                                        <th>学号</th>
                                        <th>姓名</th>
                                        <th>选课详情</th>
                                    </tr>
                                    <tr>
                                        <td>123456789</td>
                                        <td>王多余</td>
                                        <td>1</td>
                                    </tr>
                                    <tr>
                                        <td>123456789</td>
                                        <td>王多余</td>
                                        <td>1</td>
                                    </tr>
                                    <tr>
                                        <td>123456789</td>
                                        <td>王多余</td>
                                        <td>1</td>
                                    </tr>
                                </table>
                                <ul class="pager">
                                    <li><a href="#">上一页</a></li>
                                    <li><a href="#">首页</a></li>
                                    <li>第<span>1</span>页</li>
                                    <li><a href="#">尾页</a></li>
                                    <li><a href="#">下一页</a></li>
                                    <span>共<span>6</span>页</span>
                                </ul>
                            </div>
                            <div class="modal-footer">
                                <a class="btn btn-success daochu">导出列表</a>
                                <a class="btn btn-default" data-dismiss="modal">关闭窗口</a>
                            </div>
                        </div>
                    </div>
                </div>
<script>
    //课程详情
    $.ajax({
        url: '/sel-course',
        type: 'GET',
        data: cno,
        success: function (data) {
            if (data.status == 1) {
                var type = ''
                if (data.type == 0) {
                    type = '已开课'
                } else if (data.type == 1) {
                    type = '未开课可选报'
                } else if (data.type == 2) {
                    type = '未开课不可选报'
                }
                var html = `<tr>
                                <td>课程编号</td>
                                <td>`+ data.cno +`</td>
                            </tr>
                            <tr>
                                <td>课程名称</td>
                                <td>`+ data.cname +`</td>
                            </tr>
                            <tr>
                                <td>老师编号</td>
                                <td>`+ data.tno +`</td>
                            </tr>
                            <tr>
                                <td>课程老师</td>
                                <td>`+ data.tname +`</td>
                            </tr>
                            <tr>
                                <td>课程学分</td>
                                <td>`+ data.credit +`</td>
                            </tr>
                            <tr>
                                <td>总课时</td>
                                <td>`+ data.chour +`</td>
                            </tr>
                            <tr>
                                <td>课程状态</td>
                                <td>`+ type +`</td>
                            </tr>`
                $('.table-test').html('')
                $('.table-test').html(html)
            }else if (data.status == -1) {
                $('#myModal').modal()
            }
        },
        error: function (data) {
            console.log('出错了')
        }
    })
    //获取学生列表
    $('.huoqu').click(function () {
        var obj = {
            pageNum: 1,
            pageSize: 10,
        }
        $.ajax({
            url: '/sel-stulist',
            type: 'GET',
            data: obj,
            success: function (data) {
                if (data.status == 1) {
                    $('.pager li>span').text(data.page.pageNum)
                    $('.pager span>span').text(data.page.totalPageNum)
                    for (var i = 0; i < data.page.totalCount; i++) {
                        var html = `<tr>
                                        <th>学号</th>
                                        <th>姓名</th>
                                        <th>选课详情</th>
                                    </tr>`
                        html = html + `<tr>
                                           <td>`+ data.page.stuList[i].sno +`</td>
                                           <td>`+ data.page.stuList[i].name +`</td>
                                           <td>`+ data.page.stuList[i].pass +`</td>
                                       </tr>`
                        $('.table-content').html(' ')
                        $('.table-content').html(html)
                        $('.pager li').eq(0).addClass('disabled')
                        $('.pager li').eq(1).addClass('disabled')
                        $('#myModal2').modal()
                    }
                } else if (data.status == 0) {
                    $('#myModal').modal()
                }
            },
            error: function (data) {
                console.log('出错了')
            }
        })
    })
    //获取学生列表分页
    $('.pager li').click(function () {
        var a = $('.pager li>span').text()
        var _this = this
        var index = $('.pager li').index(this)
        a = Number(a)
        var obj = {
            pageNum: a,
            pageSize: 10,
        }
        $.ajax({
            type: 'GET',
            url: '/sel-stulist',
            data: obj,
            success: function (data) {
                if (data.status == 1) {
                    if (index == 0) {
                        if (a <= 1) {
                            $('.pager li').eq(0).addClass('disabled')
                            $('.pager li').eq(1).addClass('disabled')
                        }else if (a > 1){
                            num = a - 1
                            $('.pager li>span').text(num)
                            $('.pager li').eq(3).removeClass('disabled')
                            $('.pager li').eq(4).removeClass('disabled')
                            for (var i = 0; i < data.page.totalCount; i++) {
                                var html = `<tr>
                                                <th>学号</th>
                                                <th>姓名</th>
                                                <th>选课详情</th>
                                            </tr>`
                                html = html + `<tr>
                                                   <td>`+ data.page.stuList[i].sno +`</td>
                                                   <td>`+ data.page.stuList[i].name +`</td>
                                                   <td>`+ data.page.stuList[i].pass +`</td>
                                               </tr>`
                                $('.table-content').html(' ')
                                $('.table-content').html(html)
                            }
                        }
                    }else if (index == 1) {
                        $('.pager li').eq(0).addClass('disabled')
                        $('.pager li>span').text(1)
                        $('.pager li').eq(1).addClass('disabled')
                        $('.pager li').eq(3).removeClass('disabled')
                        $('.pager li').eq(4).removeClass('disabled')
                        for (var i = 0; i < data.page.totalCount; i++) {
                            var html = `<tr>
                                            <th>学号</th>
                                            <th>姓名</th>
                                            <th>选课详情</th>
                                        </tr>`
                            html = html + `<tr>
                                               <td>`+ data.page.stuList[i].sno +`</td>
                                               <td>`+ data.page.stuList[i].name +`</td>
                                               <td>`+ data.page.stuList[i].pass +`</td>
                                           </tr>`
                            $('.table-content').html(' ')
                            $('.table-content').html(html)
                        }
                    }else if (index == 3) {
                        $('.pager li>span').text(data.page.totalPageNum)
                        $('.pager li').eq(0).removeClass('disabled')
                        $('.pager li').eq(1).removeClass('disabled')
                        $('.pager li').eq(3).addClass('disabled')
                        $('.pager li').eq(4).addClass('disabled')
                        for (var i = 0; i < data.page.totalCount; i++) {
                            var html = `<tr>
                                            <th>学号</th>
                                            <th>姓名</th>
                                            <th>选课详情</th>
                                        </tr>`
                            html = html + `<tr>
                                               <td>`+ data.page.stuList[i].sno +`</td>
                                               <td>`+ data.page.stuList[i].name +`</td>
                                               <td>`+ data.page.stuList[i].pass +`</td>
                                           </tr>`
                            $('.table-content').html(' ')
                            $('.table-content').html(html)
                        }
                    }else if (index == 4) {
                        if (a >= data.page.totalPageNum) {
                            $('.pager li').eq(3).addClass('disabled')
                            $('.pager li').eq(4).addClass('disabled')
                        }else if (a < data.page.totalPageNum){
                            num = a + 1
                            $('.pager li>span').text(num)
                            $('.pager li').eq(0).removeClass('disabled')
                            $('.pager li').eq(1).removeClass('disabled')
                            for (var i = 0; i < data.page.totalCount; i++) {
                                var html = `<tr>
                                                <th>学号</th>
                                                <th>姓名</th>
                                                <th>选课详情</th>
                                            </tr>`
                                html = html + `<tr>
                                                   <td>`+ data.page.stuList[i].sno +`</td>
                                                   <td>`+ data.page.stuList[i].name +`</td>
                                                   <td>`+ data.page.stuList[i].pass +`</td>
                                               </tr>`
                                $('.table-content').html(' ')
                                $('.table-content').html(html)
                            }
                        }
                    }
                } else if (data.status == 0) {
                    $('#myModal').modal()
                }
            },
            error: function (data) {
                console.log('出错了')
            }
        })
    })
    //导出学生列表
    $('.daochu').click(function () {
        $.ajax({
            url: '/down-courselist',
            type: 'GET',
            data: cno,
            success: function (data) {
                if (data.status == 0) {
                    $('#myModal2').modal()
                } else {
                    $('#myModal').modal()
                }
            },
            error: function (data) {
                console.log('出错了')
            }
        })
    })
</script>
